
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
</head>
<body>


<div class="layui-form-item">
    <!--条件查询----------->
    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-inline">
            <input type="text" required lay-verify="required" name="userTelphone" id="nameId" class="layui-input">
        </div>
        <button type="button" id="btn1" class="layui-btn  ">
            <i class="layui-icon">&#xe615;</i>
        </button>
    </div>
</div>
<div class="layui-row">
    <table class="layui-hide" id="myTable" lay-filter="myTable"></table>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">
        <i class="layui-icon layui-icon-edit"></i>
        修改状态</a>
</script>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script>
        layui.use(['form', 'table'], function () {
            var $ = layui.$;
            var form = layui.form;
            var table = layui.table;
            table.render({
                elem:"#myTable"//指定到一个html元素，写的是选择器
                ,url:"${pageContext.request.contextPath}/user/selectAll"//发送请求的后台地址
                ,toolbar:"#toolbarDemo"
                ,cols:[[
                    {type:"checkbox"}
                    ,{field:"userId",title:"编号",width:80}
                    ,{field:"userName",title:"姓名" ,width:100}
                    ,{field:"userTelphone",title:"电话",width:150}
                    ,{field:"userNickname",title:"昵称",width:80}
                    ,{field:"userImage",title:"头像",width:150,templet:function (d) {
                            return '<div><img height=\'50px\',width=\'50px\' src=${pageContext.request.contextPath}/'+d.userImage+' ></div>'
                        }}
                    ,{field:"userPassword",title:"密码",width:100}
                    ,{field:"userSex",title:"性别",width:50}
                    ,{field:"userAutograph",title:"个性签名",width:120}
                    ,{field:"userProvince",title:"省份",width:80}
                    ,{field:"userCity",title:"城市",width:80}
                    ,{field:"gurnId",title:"上师ID",width:70,templet:function (d) {
                            return d.gurn.guruId
                        }}
                    ,{field:"gurnName",title:"上师名字",width:80,templet:function (d) {
                            return d.gurn.guruName
                        }}
                    ,{field:"userStatus",title:"用户状态",width:80,templet:function (d) {
                            if (d.userStatus==1){
                                return "冻结";
                            }else if (d.userStatus==0) {
                                return "激活";
                            }
                        }}
                    ,{field:"userCreateDate",title:"注册日期",width:200}
                    ,{title:"操作",templet:"#barDemo",width:100}
                ]]
                , page: true //开启分页
                ,limit:10
                ,limits:[10,20,30]
            });
            // --------------条件查询 开始-------------
            $("#btn").click(function () {
                table.reload('myTable', {
                    where: {   //设定异步数据接口的额外参数
                        userTelphone:$("#nameId").val(),
                    },
                    page:{
                        curr:1
                    }
                })
            })
            // --------------条件查询 结束-------------
            //监听行工具事件   单个删除   开始---------
            table.on('tool(myTable)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') {
                    $.ajax({
                        url:'${pageContext.request.contextPath}/user/updateStatus',
                        data:"userStatus="+obj.data.userStatus+"&userId="+obj.data.userId,
                        success:function (result) {
                            if(result.flag){
                                table.reload('myTable');
                                layer.msg("修改成功");
                            }else if(result.flag==false){
                                layer.msg("修改异常")
                            }
                        }
                    })
                }
            });


        })


    </script>
</body>
</html>
